@import "../../config";

::ng-deep mat-form-field.mat-form-field-appearance-outline .mat-form-field-wrapper {
  margin: 0;
  max-height: 40px;
}

.workflow-specs {
  padding: 3rem;
}

.buttons {
  height: 60px;
}

.custom-fab {
  width: 45px;
  height: 45px;
}

.custom-icon {
  margin-left: 10px;
  margin-top: -15px;
}

.content {
  min-height: 600px;
}

.category-top {
  padding: 0 1rem 1rem 0;

  h4 {
    margin: 1rem 1rem 0 0;
  }

  .category-actions {
    opacity: 0;

    &:hover {
      opacity: 1;
    }
  }

  &:hover {
    .category-actions {
      opacity: 1;
    }
  }

}

.category {
  padding: 2rem 1rem .75rem 0;

  h4 {
    margin: 5px 1rem 0 0;
  }

  .category-actions {
    opacity: 0;

    &:hover {
      opacity: 1;
    }
  }

  &:hover {
    .category-actions {
      opacity: 1;
    }
  }

}

.mat-list-base .mat-list-item, .mat-list-base .mat-list-option {
  height: auto;
}

.workflow-spec {
  border-left: 4px solid $brand-gray-light;
  font-size: 1em;
  cursor: pointer;

  &:hover {
    border-left: 4px solid $brand-primary;
    background-color: $brand-primary-tint-4;
    cursor: pointer;
  }

  .library_item {
    padding: 10px;
  }

  .spec_menu_item {
    flex-flow: row;
    display: inline-block;
    width: 300px;
    margin-left: 20px;
  }
  .spec-selected {
    font-weight: bold;
  }
  .spec-actions {
    width: 100px;
    opacity: 0;
  }
  &:hover {
    .spec-actions {
      opacity: 1;
    }
  }
}

.library-selected {
  font-weight: bold;
}


.workflow-spec-actions {
  button {
    margin-right: 1em;
  }
}
